<template>
  <div class="headerbox">
    <div class="header">
        <div class="headerL">
            <a onClick="javascript:history.back(-1)" class="goback"><img src="/assets/images/goback.png" /></a>
        </div>
        <div class="headerC">
            <p>充值中心</p>
        </div>
        <div class="headerR"></div>
    </div>
</div>
<div class="clear"></div>
<div class="h50"></div>
<div class="deposit_bar">
    <img src="/assets/images/deposit1.png" alt="">
    <div class="deposit_bar__content">公告：未满18岁的未成年人请勿消费</div>
</div>
<div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
        <span>账户余额：￥ {{LoginUser.money}}</span>
    </div>
</div>
<div class="deposit_bar_large">
    <img src="/assets/images/deposit2.png" alt="">
    <div class="deposit_bar_large__title">
        <span>用户：{{LoginUser.nickname}}</span>
    </div>
</div>

<van-form  @submit="onSubmit">
  <div class="gdje">固定金额</div>
  <van-field name="num" v-model="num" placeholder="自定义金额"  @touchstart.stop="show=true"/>

  <div class="van-divider van-divider--hairline van-divider--content-center">
      固定金额
  </div>
  <van-grid :column-num="3" direction="horizontal">
    <van-grid-item id="gtext" icon="gold-coin-o" text="5元" />
    <van-grid-item id="gtext" icon="gold-coin-o" text="10元" />
    <van-grid-item id="gtext" icon="gold-coin-o" text="20元" />
    <van-grid-item id="gtext" icon="gold-coin-o" text="50元" />
    <van-grid-item id="gtext" icon="gold-coin-o" text="100元" />
    <van-grid-item id="gtext" icon="gold-coin-o" text="200元" />
  </van-grid>
  <!-- <van-field name="remark" v-model="remark" label="充值备注" placeholder="请输入内容" /> -->
  <van-field name="radio" label="单选框">
    <template #input>
      <van-radio-group v-model="checked" direction="horizontal">
        <van-radio name="zfb">支付宝</van-radio>
        <van-radio name="wx">微信</van-radio>
      </van-radio-group>
    </template>
  </van-field>

  <div style="margin: 16px;">
    <van-button round block type="primary" native-type="submit">
        提交
    </van-button>
  </div>
</van-form>


<van-number-keyboard id="rechargeKey"
  :show="show"
  theme="custom"
  extra-key="."
  close-button-text="完成"
  @blur="show = false"
  @input="onInput"
  @delete="onDelete"
/>
<Footer/>
</template>

<script setup>
import Footer from '@/components/common/footer.vue'
import { showToast } from 'vant';
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get("LoginUser"))

const checked = ref('wx');
const show = ref(false);
const num=ref('')
const onInput = (val)=>{
  num.value=num.value+val;
};
const onDelete = ()=>{
  if(num.value>0){
    const string=num.value;
    num.value=string.slice(0,-1);
  }
};

const onSubmit =async (values) => {
  console.log(values);
  let data = {
        busid: LoginUser.id,
        money:values.num,
        type:values.radio
    }
    let result = await Api.recharge(data)
    if (result.code == 1) {
        console.log(result.data);
        //设置cookie
        proxy.$cookies.set("LoginUser", result.data);
        showSuccessToast({
            message: result.msg,
            onClose: function() {
              // proxy.$router.push('/business/index')
            }
        });
    } else {
        showFailToast(result.msg);
    }
}
</script>


<style>
@import url('/assets/css/deposit.css');
#rechargeKey{
  margin-bottom: 5vh;
}
</style>